<template>
  <h2>toRefs的使用</h2>
  <hr />
  <!-- <h3>name:{{ state.name }}</h3>
  <h3>age:{{ state.age }}</h3> -->
  <h3>name:{{ name }}</h3>
  <h3>age:{{ age }}</h3>

  <h3>name:{{ name2 }}</h3>
  <h3>age:{{ age2 }}</h3>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";

function useRequest() {
  const state = reactive({
    name2: "自来也",
    age2: 43,
  });
  return {
    ...toRefs(state),
  };
}

export default defineComponent({
  name: "App",
  setup() {
    // toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref
    const state = reactive({
      name: "自来也",
      age: 43,
    });

    // 此时 state2中的属性都变成了ref
    const state2 = toRefs(state);

    // const { name, age } = toRefs(state);
    setInterval(() => {
      // name.value += "===";
      state2.name.value += "===";
    }, 1000);

    const state3 = useRequest();

    return {
      ...state2,
      ...state3,
    };
  },
});
</script>

<style>
</style>
